<template>
<div class="hello">
  <h1>子组件1</h1>
  <h5>(父子组件单独通信)</h5>
  <h4>收到父组件传递数据：{{msg}}</h4>
  <input v-model="childMsg">
  <button @click="sendToFather">向父组件传递数据</button>
  <h3>读取store中state的数据：{{this.$store.state.username}}</h3>
  <input v-model="username">
  <button @click="updateUserNameByMutation">Mutation修改</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloSon',
    data(){
      return{
        childMsg:'',
        username:''
      }
    },
    props:{
      msg:String
    },
    methods:{
      sendToFather(){
        this.$emit("out",this.childMsg);
      },
      updateUserNameByMutation(){
        this.$store.commit("SET_NAME",this.username);
      }
    }
  }
</script>
<style scoped lang="scss">
  .hello {
    background-color:aquamarine;
  }
</style>